<template>
  <div>
    <el-card class="box-card organization" shadow="hover">
      <template #header>
          <div class="card-header">
            <span span style='font-size:18px'><i class='el-icon-star-off'></i> 研发部</span>
          </div>
        </template>

        <div>
          <vxe-table
            ref="xTable"
            border
            show-overflow
            :auto-resize="true"
            keep-source
            :data="demo1.tableData"
            :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="名字" width="250"></vxe-table-column>
             <vxe-table-column field="department" title="部门" width="250"></vxe-table-column>
            <vxe-table-column field="role" title="职位" :edit-render="{name: 'input'}" width="250"></vxe-table-column>
            <vxe-table-column field="sex" title="性别" :edit-render="{name: '$select', options: sexList}" width="150"></vxe-table-column>
            <vxe-table-column title="操作" align='center'>
              <template #default="{ row }">
                <vxe-button status="success" icon="el-icon-notebook-1" v-if="!$refs.xTable.isInsertByRow(row)" @click="$refs.xTable.revertData(row)">查看个人档案</vxe-button>
                <vxe-button status="primary" icon="el-icon-position">发送通知</vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div><br>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="demo1.tableData.length">
        </el-pagination>
    </el-card>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { VXETable, VxeTableInstance } from 'vxe-table'

export default defineComponent({
  name: 'project_grpup1',
  setup () {
    const demo1 = reactive({
      tableData: [
        { id: 10001, name: '张三',department:'研发部', role: '研发总监', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: '李四',department:'研发部', role: '项目经理', sex: '1', age: 22, address: 'Guangzhou' },
        { id: 10003, name: '王五',department:'研发部', role: '项目经理', sex: '0', age: 32, address: 'Shanghai' },
        { id: 10004, name: '赵六',department:'研发部', role: '系统架构师', sex: '1', age: 23, address: 'vxe-table 从入门到放弃' },
        { id: 10005, name: '刘一',department:'研发部', role: '前端工程师', sex: '1', age: 30, address: 'Shanghai' },
        { id: 10006, name: '陈二',department:'研发部', role: '后端工程师', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10007, name: '孙七',department:'研发部', role: '测试', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10008, name: '周八',department:'研发部', role: '产品经理', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10009, name: '吴九',department:'研发部', role: '小职员', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' }
      ],
    })

    const xTable = ref({} as VxeTableInstance)

    const insertEvent = async () => {
      const $table = xTable.value
      const record = {
        sex: '1'
      }
      const { row: newRow } = await $table.insert(record)
      $table.setActiveCell(newRow, 'sex')
    }

    const sexList = ref([
      { label: '', value: '' },
      { label: '男', value: '1' },
      { label: '女', value: '0' }
    ])


    const removeEvent = () => {
      const $table = xTable.value
      const selectRecords = $table.getCheckboxRecords()
      if (selectRecords.length) {
        VXETable.modal.confirm('您确定要删除选中的数据吗?').then(type => {
          if (type === 'confirm') {
            $table.removeCheckboxRow()
          }
        })
      } else {
        VXETable.modal.message({ message: '请至少选择一条数据', status: 'error' })
      }
    }

    const revertEvent = () => {
      const $table = xTable.value
      VXETable.modal.confirm('您确定要还原数据吗?').then(type => {
        if (type === 'confirm') {
          $table.revertData()
        }
      })
    }

    const saveEvent = () => {
      const $table = xTable.value
      const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
      VXETable.modal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
    }

    return {
      demo1,
      xTable,
      insertEvent,
      removeEvent,
      revertEvent,
      saveEvent,
      sexList,
    }
  }
});
</script>
<style lang="scss" scoped>
</style>
